<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 只有行内有这个属性就能匹配 */
        [xx] {
            background-color: yellowgreen;
        }

        [xx] p {
            color: pink;
        }

        /* 既要满足有class，还要满足只能是li5这个类 */
        [class=li5] {
            font-size:40px;
        }

        [class] {
            font-style: italic;
        }

        /* 标签选择器   属性选择器  交集选择器 */
        /* 既要满足是li标签，又要满足有class属性 */
        li[class] {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="myli li3">3</li>
        <li>4</li>
        <li xx class="li5">5</li>
    </ul>

    <div xx class="box">我是div <p>div里的p</p> </div>
</body>

</html>